<template>
  <div id="app">
    <div class="icons-div" style="text-align: center">
      <div style="height: 60px">
        <h2>micromap-font-awesome <span style="color: #1890ff;font-size: 14px;margin-left: 20px">
          版本：<span style="color: #ff2321;font-size: 14px">{{version}}</span>
        </span>
        </h2>
      </div>
      <textarea id="copyText" style="width: 0px;height: 0px;position:absolute;top:-100px"></textarea>
      <div>
        <input v-model="input" placeholder="请输入内容" style="width: 400px"></input>
        <button type="primary" @click="onSearch" style="margin-left: 20px">查询</button>
      </div>
      <ul class="anticons-list">
        <li v-for="iconKey in iconKeys" class="anticon anticon-step-backward" @click="copyLink(iconKey)">
          <i :class="`mm-icon-${iconKey}`" style="font-size: 48px;"></i>
          <span class="anticon-class">mm-icon-{{ iconKey }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import icons from './icons/icons'
import config from '../package.json'
export default {
  name: 'app',
  data() {
    return {
      icons: icons,
      iconKeysAll: [],
      iconKeys: [],
      input: '',
      version: config.version
    }
  },
  components: {

  },
  mounted: function () {
    this.iconKeys = Object.keys(icons);
    this.iconKeysAll = this.iconKeys;
  },
  methods: {
    /**
     * resize方法必须要有
     */
    resize: function () {
      this.$nextTick(() => {
        //组件大小变动代码
      })
    },
    copyLink: function (iconKey) {
      let copyText = document.getElementById("copyText");
      let classStr = "mm-icon-"+iconKey;
      copyText.innerText = classStr;
      copyText.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      alert("复制成功："+classStr);
    },
    onSearch: function () {
      let value=this.input;
      let _this = this;
      if (value == '' || value == null) {
        _this.iconKeys = _this.iconKeysAll;
      } else {
        let iconKeysArr = this.iconKeysAll
        let length = iconKeysArr.length;
        let iconKeysCopy = [];
        for (let i = 0; i < length; i++) {
          if (iconKeysArr[i].indexOf(value) >= 0) {
            iconKeysCopy.push(iconKeysArr[i]);
          }
        }
        _this.iconKeys = iconKeysCopy;
      }

    }

  }
}
</script>
<style type="text/css" scoped>
  .icons-div {
    padding: 10px;
  }

  ul.anticons-list li:hover {
    background-color: #1890ff;
    color: #fff;
  }

  ul.anticons-list li {
    float: left;
    width: 16.66%;
    text-align: center;
    list-style: none;
    cursor: pointer;
    height: 100px;
    color: #555;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    position: relative;
    margin: 3px 0;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    padding: 10px 0 0;
  }

  body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  user agent stylesheet
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  ul.anticons-list {
    margin: 10px 0;
    list-style: none;
    overflow: hidden;
  }

  ul, ol {
    list-style: none;
  }

  user agent stylesheet
  ul {
    list-style-type: disc;
  }

  ul.anticons-list li:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: 'Copied!';
    text-align: center;
    line-height: 110px;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    opacity: 0;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  ::selection {
    background: #1890ff;
    color: #fff;
  }

  ul.anticons-list li .anticon-class {
    display: block;
    text-align: center;
    transform: scale(0.83);
    font-family: 'Lucida Console', Consolas;
    white-space: nowrap;
    font-size: 16px;
    padding-top: 5px;
  }
</style>
